<!DOCTYPE html>
<!--

-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Model-Builder</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone%20Kaffeesatz|OFL%20Sorts%20Mill%20Goudy%20TT|Molengo&key=769622cSDqbwL9qEhUFg">
<style type="text/css">
@font-face {
  font-family: 'English Towne';
  src: local('English Towne'), url('EnglishTowne.ttf') format('truetype');
}
* {
  margin: 0;
  padding: 0;
}
body {
  font: 12px "Times New Roman", Times, serif;
  padding: 0 30px;
  line-height: 1.5;
}
body.web20  {
  font: 12px 'OFL Sorts Mill Goudy TT', Molengo, "Times New Roman", Times, serif;
}
header.title h1 {
  word-spacing: -12px;
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #999;
}
.web20 header.title h1 {
  text-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px;
  font: 40pt 'English Towne';
}
nav li {
  list-style: none;
  float: left;
  margin-right: 15px;
}
nav li a {
  text-decoration: none;
  font-size: 125%;
  padding: 5px 8px;
  border: 1px solid transparent;
  color: #004276;
}
.web20 nav li a {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
nav li a:hover {
  border: 1px solid #004276;
}
nav li a:active {
  background-color: #ddd;
}
footer {
  border-top: 1px solid #999;
  text-align: center;
  padding: 10px 0;
}
.web20 a[href^="http"] {
  /*content: url();
  */
  color: #004276;
  background: transparent url() no-repeat center right;
  padding-right: 12px;
}
#wrapper {
  margin: auto;
  width: 100%;
}
section {
  clear: both;
  padding-top: 15px;
}

article > div > p {
  text-indent: 20pt;
}
article > div {/*article div[class*='text'] {*/
  margin-bottom: 20px;
  text-align: justify;
  text-justify: newspaper;
}
.web20 article header {
  font-family: 'Molengo';
}
article footer {
  border: none;
  text-align: left;
  padding: 0;
}

article footer.posted:before {
  content: 'Posted: ';
}
.web20 .text1 {
/*  -webkit-column-width: 250px;
  -moz-column-width: 250px;
  column-width: 250px;
*/
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.text1 header {
  margin-bottom: 20px;
}
.web20 .text2 p:first-of-type::first-letter {
  font-size: 14pt;
}
.text2 { 
  padding: 1em;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
}
.web20 .text2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-rule: 1px solid #999;
  -moz-column-rule: 1px solid #999;
  column-rule: 1px solid #999;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.web20 .text3 {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.web20 .text4 {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.web20 input[type='range'] {
  vertical-align: middle;
}
#configCols {
  text-align: center;
  clear: both;
  padding-top: 10px;
}
.web10 article > div {
  -moz-column-count: 0 !important;
  -webkit-column-count: 0 !important;
  column-count: 0 !important;
  -webkit-column-gap: 0 !important;
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
  -webkit-column-rule: 0 !important;
  -moz-column-rule: 0 !important;
  column-rule: 0 !important;
}
</style>
</head>
<body class="web20">
  <div id="wrapper">

    <header class="title">
    	<h1>Model-Builder Cloud Community</h1>
		<hgroup>
			
		</hgroup>
	</header>

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/library">Model Archives</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="#">Contact</a></li>
		{%if logged_in %}
		<li><a href="#">Your Profile</a></li>
		{% endif %}
		<li><a title="welcome." href="{{ url }}">{{ url_linktext }}</a></li>
      </ul>
    </nav>
    
   <div id="configCols">
      <label>
        column-count:
        <input type="range" min="1" max="5" step="1" value="2" name="column-count" onchange="changeProp(this)"/>
      </label>

      <label>
        column-gap:
        <input type="range" min="0" max="100" step="10" value="20" name="column-gap" onchange="changeProp(this)"/>

      </label>

      <label>
        column-rule:
        <input type="range" min="0" max="10" step="1" value="1" name="column-rule-width" onchange="changeProp(this)"/>
      </label>

      <label>
        justify text: 
        <input type="checkbox" checked name="text-align" onchange="changeProp(this)"/>
      </label>

      <label>
        enable CSS3 styles: 
        <input type="checkbox" id="web20" checked="checked">
      </label>
    </div>
    
      
    <section>
      <article>
        <div class="text1">
          <header>

            <hgroup>
              <h1>Welcome to our Cloud Community</h1>
              <h3>Share your models and take advice from your peers!</h3>
            </hgroup>
            
          </header>
          <p>If you use Model-Builder for your research or teaching, how about publish your models on the web so that your peers can see your work and comment on it?</p>
		  <p>On our cloud community, you decide who can view your work by inviting them to share. Or, if you prefer, you can make your work public, so that anyone can see how cool it is!</p>

          <!-- <p>Aliquam erat volutpat. Donec libero arcu,tempor non consectetur nec, placerat ut sapien. 
            Ut adipiscing scelerisque interdum. Aliquam dolor metus, consequat eu facilisis in, 
            gravida ut eros. Fusce convallis <a href="http://www.example.com">external link</a> semper aliquam. Class aptent taciti sociosqu ad litora 
            torquent per conubia nostra, per inceptos himenaeos. Donec ac leo eget lorem fermentum sodales 
            id nec neque. Nam euismod justo ac augue sodales ac consectetur nisl volutpat. Nulla vel erat 
            felis, at molestie risus. Nunc ut nibh magna.</p> -->
        </div>
        <div class="text2" id="customCols">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor, nisi at ornare fermentum, libero 
            mi feugiat arcu, <a href="http://www.example.com">external link</a> rutrum congue eros diam a felis. Fusce ac neque sapien. Nulla facilisi. Quisque 
            placerat convallis vestibulum. Nunc imperdiet <a href="#">local link</a> vulputate sodales. Suspendisse pharetra bibendum 
            massa in vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
            ridiculus mus. Sed nec porta lectus. Cum sociis natoque penatibus et magnis dis parturient 
            montes, nascetur ridiculus mus. Nullam eu nunc ligula, vel pretium erat. Nunc eu est tellus, 
            vitae sollicitudin tellus. In hac habitasse platea dictumst.</p>
          <p>Aliquam erat volutpat. Donec libero arcu,tempor non consectetur nec, placerat ut sapien. 
            Ut adipiscing scelerisque interdum. Aliquam dolor metus, consequat eu facilisis in, 
            gravida ut eros. Fusce convallis <a href="http://www.example.com">external link</a> semper aliquam. Class aptent taciti sociosqu ad litora 
            torquent per conubia nostra, per inceptos himenaeos. Donec ac leo eget lorem fermentum sodales 
            id nec neque. Nam euismod justo ac augue sodales ac consectetur nisl volutpat. Nulla vel erat 
            felis, at molestie risus. Nunc ut nibh magna.</p>

        </div>
       
       <div class="text3">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor, nisi at ornare fermentum, libero 
            mi feugiat arcu, <a href="http://www.example.com">external link</a> rutrum congue eros diam a felis. Fusce ac neque sapien. Nulla facilisi. Quisque 
            placerat convallis vestibulum. Nunc imperdiet <a href="#">local link</a> vulputate sodales. Suspendisse pharetra bibendum 
            massa in vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
            ridiculus mus. Sed nec porta lectus. Cum sociis natoque penatibus et magnis dis parturient 
            montes, nascetur ridiculus mus. Nullam eu nunc ligula, vel pretium erat. Nunc eu est tellus, 
            vitae sollicitudin tellus. In hac habitasse platea dictumst.</p>
          <p>Aliquam erat volutpat. Donec libero arcu,tempor non consectetur nec, placerat ut sapien. 
            Ut adipiscing scelerisque interdum. Aliquam dolor metus, consequat eu facilisis in, 
            gravida ut eros. Fusce convallis <a href="http://www.example.com">external link</a> semper aliquam. Class aptent taciti sociosqu ad litora 
            torquent per conubia nostra, per inceptos himenaeos. Donec ac leo eget lorem fermentum sodales 
            id nec neque. Nam euismod justo ac augue sodales ac consectetur nisl volutpat. Nulla vel erat 
            felis, at molestie risus. Nunc ut nibh magna.</p>

        </div>
        <footer class="posted">
          <time pubdate datetime="2010-05-10T14:36-08:00">Thursday, May 10, 2010</time>
        </footer>
      </article>
    </section>
    <footer>
      <p>Copyright 2010 <a href="http://www.cuboc3.com">Cubo Computação Científica</a></p>

    </footer>
  </div>
  
<script>

  function changeProp(input){
    
    var prop = input.name;
    var value;
    
    if (input.name == 'text-align'){
      value = input.checked ? 'justify' : 'inherit';
    } else {
      value = input.value + (input.name == 'column-count' ? '' : 'px');
    }
    
    [].forEach.call( document.querySelectorAll('article > div'), function(elem, k) {
      
      // an extra column for the middle guy.
      if (k == 1 && prop == 'column-count'){
        value++;
      }
      
      prop = prop.replace(/(:?^.|(-[a-z]))/ig, function(all, letter) {
        return letter.replace('-','').toUpperCase();
      });
      
      elem.style['Webkit'+prop] = value;
      elem.style['Moz'+prop] = value;
      elem.style[prop.charAt(0).toLowerCase() + prop.slice(1)] = value;
    });
  }
  
  
  document.getElementById('web20').addEventListener('click', function() {
    var el = document.body;
    if (this.checked) {
      el.className = 'web20';
    
    } else {
      el.className = 'web10';
    }
  }, false);
  
</script>
</body>
</html>

